<template>
  <div class="header-wrapper">
    <!-- 头部 -->
    <el-header class="main-header">
      <div class="max-w-1200px h-70px mx-auto px-20px flex justify-between items-center">
        <!-- Logo -->
        <div class="flex items-center">
          <img
            src="@/assets/image/logo.png"
            alt="官网Logo"
            class="h-40px mr-15px"
          />
          <img
            src="@/assets/image/title.png"
            alt="title"
          />
        </div>

        <!-- 注册登录按钮 -->
        <div
          v-if="!isLoggedIn"
          class="auth-buttons"
        >
          <el-link
            type="primary"
            @click="goToRegister"
            class="mr-[30px]"
          >注册</el-link>
          <el-link
            type="primary"
            @click="goToLogin"
          >登录</el-link>
        </div>
         <div
          v-else
          class="flex items-center"
        >
          <!-- 修改为普通链接形式 -->
          <div class="flex items-center">
            <img
              src="@/assets/image/avatar.png"
              class="w-30px h-30px"
              alt=""
            >
            <span class="ml-10px mr-15px">{{ nickname || 'admin' }}</span>
            <el-link 
              type="primary" 
              @click="gotoUserCenter"
              class="mr-15px"
            >
              个人中心
            </el-link>
            <el-link 
              type="primary" 
              @click="logout"
            >
              退出
            </el-link>
          </div>
        </div>
      </div>
    </el-header>

    <!-- 导航 -->
    <el-menu
      :default-active="activeIndex"
      class="w-full mx-auto px-20px border-b-0 flex justify-between bg-[#0920a8] main-nav"
      mode="horizontal"
      @select="handleSelect"
      router
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/supplier">供方市场</el-menu-item>
      <el-menu-item index="/demand">需方市场</el-menu-item>
      <el-menu-item index="/enterprise">企业中心</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "/",
      userInfo: {},
      isLogin: false,
    };
  },
  computed: {
    ...mapGetters("user", ["isLoggedIn", "nickname"]),
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToRegister() {
      this.$router.push("/register");
    },
    handleDropdown(command) {
      switch (command) {
        case "userCenter":
          if (this.$route.name !== "center") {
            this.$router.push({
              name: "center",
              query: { activeMenu: 'personalCenter' },
            });
          }
          break;
        case "logout":
          this.logout();
          break;
        default:
          break;
      }
    },
    logout() {
      this.$store.dispatch("user/logout").then(() => {
        this.$message.success("退出登录成功");
        this.$router.push("/login");
      });
    },
    gotoUserCenter() {
      if (this.$route.name !== "center") {
        this.$router.push({
          name: "center",
          query: { activeMenu: 'personalCenter' },
        });
      }
    },
  },
  watch: {
    $route(to) {
      this.activeIndex = to.path === "/" ? "/" : to.path;
    },
  },
  mounted() {
    this.activeIndex = this.$route.path === "/" ? "/" : this.$route.path;
  },
};
</script>

<style scoped>
.header-wrapper {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.main-header {
  padding: 0;
}

.main-nav ::v-deep .el-menu-item {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.main-nav ::v-deep .el-menu-item.is-active {
  border-bottom-color: #0181d5 !important;
  color: rgb(253, 213, 2) !important;
  background: #0920a8 !important;
}
.main-nav ::v-deep .el-menu-item:hover {
  background: #0920a8 !important;
  color: rgb(253, 213, 2) !important;
  border-bottom-color: #0181d5 !important;
}
::v-deep .el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
</style>